<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>商品列表</title>
    <link href = "css/bootstrap.min.css" rel = "stylesheet" type = "text/css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
		.input-xlarge{
			height:27px;
			width:200px;
		}
		
	</style>
  </head>
  
  <body>
    <div class="navbar">
		<div class="navbar-inner">
			<div class="container" style="width: auto;">
				<a class="brand" href="#">商品列表</a>
				<div class="nav-collapse">
					<ul class="nav">
					    <li class="active">
					    	<a href="#">首页</a>
					    </li>
					    <li><a href="#">用户管理</a></li>
				    </ul>
				    <ul class="nav pull-right">
						<li class="divider-vertical"></li>
						<li>
							<a href="#">xx</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
	
	
	<div class="container">
	<fieldset><legend>商品记录</legend></fieldset> 
	<table class="table table-striped">
		<thead>
			<tr>
				<th>商品编号</th>
				<th>名称</th>
				<th>价格</th>
				<th>是否上架</th>
				<th>操作</th>
		  	</tr>
	 	</thead>
	 	<tbody id="goods">
	 		<c:forEach items="${goodsList}" var="goods">
			 		<tr>
						<td>${goods.number}</td>
						<td>${goods.name}</td>
						<td>${goods.price }</td>
						<td>${goods.enable }</td>
						<td>
							<a id="select" class="btn btn-primary" href="javascript:void(0)" rel="${goods.id}"><i class="icon-list icon-white"></i>查看</a>
							<a id="del" class="btn btn-danger"  href="javascript:void(0)" rel="${goods.id}"><i class="icon-trash icon-white"></i>删除</a>
						</td>
					</tr>
				</c:forEach>
	 	</tbody>
	</table>
	<form name="myForm" class="form-horizontal" action = "" method="post">
	    <fieldset>
		    <legend>添加商品</legend> 
		    
		    <div class="control-group">
			    <div class="controls">
			    	<a class="btn" href="#"><i class=""></i>商品编号：</a>
			    	<input type="text" class="input-xlarge" id="number" />
			    	<a class="btn" href="#"><i class=""></i>商品名称：</a>
			    	<input type="text" class="input-xlarge" id="name"/>
			    </div>
		    </div>
			    	
		    <div class="control-group">
			    <div class="controls">
			    	<a class="btn" href="#"><i class=""></i>商品价格：</a>
			    	<input type="text" id="price" class="input-xlarge" />
			    	<a class="btn" href="#"><i class=""></i>是否上架：</a>
					<input id="yes" type="radio" value="" name="optionsRadios" checked>是
					<input id="no" type="radio" value="" name="optionsRadios" checked>否
			    </div>
		    </div>
		    
		    <div class="form-actions" >
				<button id="save" style="margin-left:60%" class="btn btn-primary" type="button" ><i class="icon-ok-sign icon-white"></i>添加</button>
				<button id="edit" class="btn btn-primary" type="button" ><i class="icon-edit icon-white"></i>编辑</button>
			</div>
	    </fieldset>
    </form>
    </div>
    
	<script type="text/javascript">
    	$(document).ready(function(){
    		$("#save").click(function(){
    			$.get("ajax.jspx",{task:"save",number:$("#number").val(),name:$("#name").val(),price:$("#price").val(),yes:$("#yes").attr("checked"),no:$("#no").attr("checked")},function(data){
    				
    				$(data).each(function(){
    					var id = this.id;
    					var number = this.number;
    					var name = this.name;
    					var price = this.price;
    					var enable = this.enable;
    					
    					$("<tr><td>"+number+"</td><td>"+name+"</td><td>"+price+".0</td><td>"+enable+"</td><td><a id='select' class='btn btn-primary' href='javascript:void(0)' rel='"+id+"'><i class='icon-list icon-white'></i>查看</a> <a id='del' class='btn btn-danger' href='javascript:void(0)' rel='"+id+"'><i class='icon-trash icon-white'></i>删除</a></td></tr>").appendTo($("#goods"));
    					
  					});
    				    				
    			});
    			
    		});
    		$("#edit").click(function(){
    			
    		
    		});
    		
    		$("td #del").live("click",function(){
    			
    			$.get("ajax.jspx",{task:"del",id:$(this).attr("rel")},function(){
    				
    				//alert("删除成功！");
    			});
    			$(this).parent().parent().remove();
    		
    		});
    		$("td #select").live("click",function(){
    			$.get("ajax.jspx",{task:"find",id:$(this).attr("rel")},function(data){
    				
    				$(data).each(function(){
    					var id = this.id;
    					var number = this.number;
    					var name = this.name;
    					var price = this.price;
    					var enable = this.enable;
    					
    					$("#number").val(number);
    					$("#name").val(name);
    					$("#price").val(price);
    					if(enable){
		    				$("#yes").attr("checked","checked");
		    			}else{
		    				$("#no").attr("checked","checked");
		    			}
    					
  					});
    			
    			});
    		
    		});
    		
    	});
    	
    </script>
  </body>
</html>
